import BaseComponent from "../../app/baseComponent";
import { createSubpageComponent } from "../page.component";
import "clusterize.js/clusterize.css"
import Clusterize from "clusterize.js/clusterize.js"

function elementEntirelyInViewport(el) {
    var top = el.offsetTop;
    var left = el.offsetLeft;
    var width = el.offsetWidth;
    var height = el.offsetHeight;
  
    while(el.offsetParent) {
      el = el.offsetParent;
      top += el.offsetTop;
      left += el.offsetLeft;
    }
  
    return (
      top >= window.pageYOffset &&
      left >= window.pageXOffset &&
      (top + height) <= (window.pageYOffset + window.innerHeight) &&
      (left + width) <= (window.pageXOffset + window.innerWidth)
    );
}

function elementPartInViewport(el) {
    var top = el.offsetTop;
    var left = el.offsetLeft;
    var width = el.offsetWidth;
    var height = el.offsetHeight;
  
    while(el.offsetParent) {
      el = el.offsetParent;
      top += el.offsetTop;
      left += el.offsetLeft;
    }
  
    return (
      top < (window.pageYOffset + window.innerHeight) &&
      left < (window.pageXOffset + window.innerWidth) &&
      (top + height) > window.pageYOffset &&
      (left + width) > window.pageXOffset
    );
}

window.elementPartInViewport = elementPartInViewport;

var data = [];
var lastnum = 0;
var usercarditemtpl = function (imgsrc, title, content) {
    return  `
<div class="app-scroll-item">${title}
    <div style="width: 50px; height: 50px; background-size: 100%;
         background-image: url(https://static.zhilizhili.com/static/3828461873613813290s.jpg),
                           url(https://static.zhilizhili.com/static/3828461873613813290.jpg)"></div>
</div>
`
}

function createUserCard(num = 5) {
    var basezhadan = [];
    for (var i = lastnum; i < lastnum + num; i ++) {
        basezhadan.push(usercarditemtpl(
            "https://static.zhilizhili.com/static/3828461873613813290.jpg",
            "天地剑法" + i,
            "文字很长时会被截断在一行内 就像这样"
        ));
    }
    lastnum = lastnum + num;
    return basezhadan;
}



class UiExampleScroll extends BaseComponent {
    constructor(name) {
        super(name);
        this.methods = {
            checkScroll (progress) {
                var self = this;

                self.lastTop = self.$refs.scrollArea.offsetHeight + self.$refs.scrollArea.scrollTop;

                if (self.canCheck) {
                    if (self.$refs.scrollArea.scrollHeight - self.lastTop < 171) {
                        self.canCheck = false;
                        console.log('------------------------------------');
                        console.log("到底啦");
                        console.log('------------------------------------');
                        setTimeout(function() {
                            self.clusterize.append(createUserCard(10)); 
                        }, 300);
                    }  
                }

                
            }
        }
    }
    _template() {
        var self = this;
        return `<div class="${self._name}">
<div id="scrollArea" ref="scrollArea" class="clusterize-scroll container">
    <div id="contentArea" ref="contentArea" class="clusterize-content">
        <div class="clusterize-no-data">Loading data…</div>
    </div>
</div>   
</div>`;
    }
    _mounted() {
        var self = this;
        var clusterize = new Clusterize({
            rows: data,
            scrollId: 'scrollArea',
            contentId: 'contentArea',
            callbacks: {
                clusterWillChange: function () {
                    // console.log('------------------------------------');
                    // console.log("will change");
                    // console.log('------------------------------------');
                    self.canCheck = false;
                },
                clusterChanged: function () {
                    // console.log('------------------------------------');
                    // console.log("changed");
                    // console.log('------------------------------------');
                    self.canCheck = true;                 

                    // Array.prototype.slice.call(self.$refs.contentArea.children)
                    // .filter(function (v) {
                    //     return !v.hasAttribute("rendered");
                    // })
                    // .forEach(function (v, index) {
                    //         v.setAttribute("rendered", "");
                    //         fastdom.mutate(() => {
                    //             if (v) {
                    //                 v.insertAdjacentHTML('afterend', 
                    //                 `<basic-element 
                    //                     src="https://static.zhilizhili.com/static/3828461873613813290.jpg"></basic-element>`);
                    //             }
                    //         });
                    //     });
                    
                },
                scrollingProgress: function (progress) {
                    // console.log('------------------------------------');
                    // console.log("process " + progress);
                    // console.log('------------------------------------');                    
                    setTimeout(function() {
                        self.checkScroll.bind(self)(progress);
                    }, 0);
                }
            }
        });
        self.clusterize = clusterize;

        // scroll end
        // var target = self.$refs.scrollArea;
        // var count = 0;
        // var timer = null; 
        // var oldTop = target.scrollTop;
        // var newTop = target.scrollTop; //为了方便起见，使用jquery或者zepto框架
        // function log(){
        //     if(timer) {
        //         clearTimeout(timer);
        //     }
        //     newTop = target.scrollTop;
        //     // console.log(++count,oldTop,newTop);
        //     if(newTop === oldTop) {
        //         clearTimeout(timer);
        //         //已停止，写入业务代码
        //         console.log('------------------------------------');
        //         console.log("end");
        //         console.log('------------------------------------');
        //     } else{
        //         oldTop = newTop;
        //         timer = setTimeout(log, 100);
        //     }        
        // }                
        // target.addEventListener("scroll", log);

        setTimeout(function() {
            clusterize.append(createUserCard(10));   
        }, 0);
    }
    _data() {
        var ret = {};
        ret.items = [];
        for (var i = 0; i < 30; i++) {
            ret.items.push("test" + i);
        }
        ret.canCheck = false;
        ret.lastTop = 0;
        return ret;
    }
}

window.AUICustomComponents.define("ui-example-scroll", UiExampleScroll);

export default createSubpageComponent(
    `<ui-example-scroll></ui-example-scroll>`
);